<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class NumberInput extends React.Component {
            constructor(props) {
                super(props)
            }
            onChange(e) {
                e.preventDefault()
                this.props.onChange(e.target.value)
            }
            render() {
                const number = this.props.number
                return <input type="text" onChange={(e) => this.onChange(e)} value={number} />
            }
        }

        class NumberInputConverter extends React.Component {

            constructor(props) {
                super(props)
                this.state = { number: '100', type: 'even' }
            }

            onOddChange(odd) {
                this.setState({ number: odd, type: 'odd' })
            }

            onEvenChange(even) {
                this.setState({ number: even, type: 'even' })
            }

            render() {
                console.log(this.state.number+'===')    
                const number = parseInt(this.state.number)
                console.log(number+"+++")
                const odd = this.state.type == 'even' ? number / 2 : number
                const even = this.state.type == 'odd' ? number * 2 : number
                return <div>
                    <NumberInput number={even} onChange={(number) => this.onEvenChange(number)} />
                    <NumberInput number={odd} onChange={(number) => this.onOddChange(number)} />
                </div>
            }
        }
        ReactDOM.render(<NumberInputConverter />,document.getElementById("root"))
    </script>
</body>

</html>